Skip to main content

CSS 中 calc 函数的使用

· 6 min read

总结 calc 函数的使用方法、与 Sass 运算的异同和最佳实践

calc() 是一个 CSS 函数，可以使用它在声明 CSS 属性值时执行一些计算，主要适用于如下属性值：

  • <length>，数字和长度单位的组合（除了百分比、时间、角度单位）
  • <percentage>，数字和百分比单位的组合
  • <number>，只有数字
  • <angle>，数字和角度单位的组合

语法​

div {
  width: calc(100% - 80px);
}

calc() 函数用一个数学表达式作为它的参数，然后返回这个表达式的计算值，比如上面这个例子中，div 的宽度等于它的包含块的宽度的 100% 减去 80px，因此只要包含块的宽度发生变化，那么这个 div 的宽度也会随着变化。

这个表达式可以是任何如下操作符的组合：

  • + 加法
  • - 减法
  • * 乘法，乘数中至少有一个是 <number>
  • / 除法，分母必须是一个 <number>，并且不能为 0，否者 html 解析器会抛出异常

表达式中的参与计算的对象可以是任意 <length>、<percentage>、<number>、<angle>，但是计算过程一定要有 意义，比如你用 calc(10px + 20deg)，让长度单位和角度单位进行运算就完全没有意义。

但是，你可以使用 calc(20px + 50%)，也可以使用 cacl(20vh + 30px)。

另外，并不局限于两个对象进行运算，可以多个对象进行运算，而且可以使用 括号 来区分优先级，比如：

div {
  width: calc(100% - (80px + 20vh) / 2);
}
important

  • + 和 - 运算符的两边必须留空白，目的是避免混淆负数，比如，calc(50% -8px) 会被解析为无效表达式，因为 50% 和 -8px它们之间没有运算符

  • calc() 函数支持嵌套，但是意义不大，最终还是会被解析为普通的括号(区分优先级)，比如：

    div {
      //     calc(100% - calc(80px + 20vh) / 2);
      width: calc(100% - (80px + 20vh) / 2);
    }

与 Sass 运算的异同点​

关于 Sass 运算机制详情请看我之前写的 Sass的核心用法，下面简单来谈一下利用 calc() 函数进行数值运算和 Sass 运算的异同。

它们都支持数学运算规则，但是 cacl() 函数的功能更强大，它具有 "响应式" 的特点，可以动态修改属性取值，并且还可以结合 CSS 原生变量来使用，相对来说 Sass 中的运算就没有那么强大了。

最佳实践​

搭配 CSS 变量​

在 CSS 变量中，对于一个数值类型的变量是不能直接和 数值单位 一起使用的。

:root {
  --size: 20;
  /* 无效 */
  font-size: var(--size)px;
}

想要实现上面的效果就需要利用 calc() 函数：

:root {
  --size: 20;
  font-size: cacl(var(--size) * 1px);
}

字体大小随视口宽度变化​

主要利用的就是 vw 和 vh 单位，使用该单位的数值大小取决于视口的宽度或者高度，实际上不使用 cacl() 函数也可以让字体大小随视口宽度变化，但是利用 cacl() 可以给字体大小加上一个最低限度，相对于给一次函数 y 轴交点值不为 0。

:root {
  font-size: cacl(1rem + 3vw);
}

优化绝对定位居中法​

让小盒子水平垂直居中在大盒子中，可以利用 绝对定位居中法，传统方案中利用了负的外边距来调整小盒子位置。这里我们使用 cacl() 函数可以避免使用负的外边距：

.father {
  width: 500px;
  height: 500px;
  position: relative;
  
  .child {
    width: 100px;
    height: 100px;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
  }
}

提高可读性​

比如 width: 33.3333% 可以替换为 width: cacl(100% / 3)，当然在 Sass 中也支持直接使用除法 width: (100% / 3)。

Reference​